'use client';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';

import { useNavigate } from 'react-router-dom';

import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import Loading from '../components/base/loading';
import Button from '@/app/components/base/button';

import { fetchInitValidateStatus, fetchSetupStatus, sendForgotPasswordEmail } from '@/service/common';
import type { InitValidateStatusResponse, SetupStatusResponse } from '@/models/common';

const accountFormSchema = z.object({
  email: z.string().min(1, { message: 'login.error.emailInValid' }).email('login.error.emailInValid'),
});

type AccountFormValues = z.infer<typeof accountFormSchema>;

const ForgotPasswordForm = () => {
  const { t } = useTranslation();
  const router = useNavigate();
  const [loading, setLoading] = useState(true);
  const [isEmailSent, setIsEmailSent] = useState(false);
  const {
    register,
    trigger,
    getValues,
    formState: { errors },
  } = useForm<AccountFormValues>({
    resolver: zodResolver(accountFormSchema),
    defaultValues: { email: '' },
  });

  const handleSendResetPasswordEmail = async (email: string) => {
    try {
      const res = await sendForgotPasswordEmail({
        url: '/forgot-password',
        body: { email },
      });
      if (res.result === 'success') setIsEmailSent(true);
      else console.error('Email verification failed');
    } catch (error) {
      console.error('Request failed:', error);
    }
  };

  const handleSendResetPasswordClick = async () => {
    if (isEmailSent) {
      router('/signin');
    } else {
      const isValid = await trigger('email');
      if (isValid) {
        const email = getValues('email');
        await handleSendResetPasswordEmail(email);
      }
    }
  };

  useEffect(() => {
    fetchSetupStatus().then((res: SetupStatusResponse) => {
      fetchInitValidateStatus().then((res: InitValidateStatusResponse) => {
        if (res.status === 'not_started') window.location.href = '/init';
      });

      setLoading(false);
    });
  }, []);

  return loading ? (
    <Loading />
  ) : (
    <>
      <div className="sm:mx-auto sm:w-full sm:max-w-md">
        <h2 className="text-[32px] font-bold text-gray-900">{isEmailSent ? t('login.resetLinkSent') : t('login.forgotPassword')}</h2>
        <p className="mt-1 text-sm text-gray-600">{isEmailSent ? t('login.checkEmailForResetLink') : t('login.forgotPasswordDesc')}</p>
      </div>
      <div className="grow mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div className="bg-white ">
          <form>
            {!isEmailSent && (
              <div className="mb-5">
                <label htmlFor="email" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
                  {t('login.email')}
                </label>
                <div className="mt-1">
                  <input
                    {...register('email')}
                    placeholder={t('login.emailPlaceholder') || ''}
                    className={
                      'appearance-none block w-full rounded-lg pl-[14px] px-3 py-2 border border-gray-200 hover:border-gray-300 hover:shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 placeholder-gray-400 caret-primary-600 sm:text-sm'
                    }
                  />
                  {errors.email && <span className="text-red-400 text-sm">{t(`${errors.email?.message}`)}</span>}
                </div>
              </div>
            )}
            <div>
              <Button variant="primary" className="w-full" onClick={handleSendResetPasswordClick}>
                {isEmailSent ? t('login.backToSignIn') : t('login.sendResetLink')}
              </Button>
            </div>
          </form>
        </div>
      </div>
    </>
  );
};

export default ForgotPasswordForm;
